<template>
  <div class="inventory-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>库存管理</span>
          <el-button type="primary" @click="handleAdd">库存调整</el-button>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="仓库">
          <el-select v-model="searchForm.warehouseId" placeholder="请选择仓库">
            <el-option label="全部" value="" />
            <el-option label="北京常温仓" value="1" />
            <el-option label="上海冷藏仓" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="库存状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="正常" value="normal" />
            <el-option label="预警" value="warning" />
            <el-option label="超储" value="overflow" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 库存列表 -->
      <el-table :data="inventoryList" border style="width: 100%">
        <el-table-column prop="warehouseName" label="仓库" width="150" />
        <el-table-column prop="productName" label="产品名称" width="150" />
        <el-table-column prop="quantity" label="当前库存" width="100">
          <template #default="scope">
            {{ scope.row.quantity }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="minStock" label="最低库存" width="100">
          <template #default="scope">
            {{ scope.row.minStock }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="maxStock" label="最高库存" width="100">
          <template #default="scope">
            {{ scope.row.maxStock }}{{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row)">
              {{ getStatusText(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" link @click="handleAdjust(scope.row)">调整</el-button>
            <el-button type="primary" link @click="handleHistory(scope.row)">记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 库存调整对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '库存调整' : '库存记录'"
      width="50%"
    >
      <template v-if="dialogType === 'add'">
        <el-form :model="adjustForm" label-width="100px">
          <el-form-item label="仓库">
            <el-select v-model="adjustForm.warehouseId">
              <el-option label="北京常温仓" value="1" />
              <el-option label="上海冷藏仓" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="产品">
            <el-select v-model="adjustForm.productId">
              <el-option label="红富士苹果" value="1" />
              <el-option label="基围虾" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="调整类型">
            <el-select v-model="adjustForm.type">
              <el-option label="入库" value="in" />
              <el-option label="出库" value="out" />
              <el-option label="盘点" value="check" />
            </el-select>
          </el-form-item>
          <el-form-item label="调整数量">
            <el-input-number v-model="adjustForm.quantity" :min="0" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="adjustForm.remark" />
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <el-table :data="historyList" border style="width: 100%">
          <el-table-column prop="type" label="类型" width="100">
            <template #default="scope">
              <el-tag :type="getOperationType(scope.row.type)">
                {{ getOperationText(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="100">
            <template #default="scope">
              {{ scope.row.type === 'out' ? '-' : '+' }}{{ scope.row.quantity }}
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="120" />
          <el-table-column prop="createTime" label="操作时间" width="180" />
          <el-table-column prop="remark" label="备注" />
        </el-table>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="dialogType === 'add'" type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  warehouseId: '',
  productName: '',
  status: ''
})

// 分页数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 库存列表数据
const inventoryList = ref([
  {
    id: 1,
    warehouseName: '北京常温仓',
    productName: '红富士苹果',
    quantity: 1000,
    minStock: 500,
    maxStock: 2000,
    unit: '斤',
    updateTime: '2024-03-09 10:00:00'
  },
  {
    id: 2,
    warehouseName: '上海冷藏仓',
    productName: '基围虾',
    quantity: 300,
    minStock: 400,
    maxStock: 1000,
    unit: '斤',
    updateTime: '2024-03-09 11:00:00'
  }
])

// 历史记录数据
const historyList = ref([
  {
    type: 'in',
    quantity: 100,
    operator: '张三',
    createTime: '2024-03-09 10:00:00',
    remark: '采购入库'
  },
  {
    type: 'out',
    quantity: 50,
    operator: '李四',
    createTime: '2024-03-09 11:00:00',
    remark: '订单出库'
  }
])

// 对话框数据
const dialogVisible = ref(false)
const dialogType = ref('add')
const adjustForm = reactive({
  warehouseId: '',
  productId: '',
  type: 'in',
  quantity: 0,
  remark: ''
})

// 获取状态类型
const getStatusType = (row) => {
  if (row.quantity < row.minStock) return 'danger'
  if (row.quantity > row.maxStock) return 'warning'
  return 'success'
}

// 获取状态文本
const getStatusText = (row) => {
  if (row.quantity < row.minStock) return '库存不足'
  if (row.quantity > row.maxStock) return '库存超储'
  return '正常'
}

// 获取操作类型
const getOperationType = (type) => {
  const typeMap = {
    in: 'success',
    out: 'danger',
    check: 'info'
  }
  return typeMap[type] || 'info'
}

// 获取操作文本
const getOperationText = (type) => {
  const typeMap = {
    in: '入库',
    out: '出库',
    check: '盘点'
  }
  return typeMap[type] || '未知'
}

// 搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log('搜索条件：', searchForm)
}

// 重置搜索
const resetSearch = () => {
  searchForm.warehouseId = ''
  searchForm.productName = ''
  searchForm.status = ''
  handleSearch()
}

// 库存调整
const handleAdd = () => {
  dialogType.value = 'add'
  Object.assign(adjustForm, {
    warehouseId: '',
    productId: '',
    type: 'in',
    quantity: 0,
    remark: ''
  })
  dialogVisible.value = true
}

// 查看历史记录
const handleHistory = (row) => {
  dialogType.value = 'history'
  dialogVisible.value = true
  // TODO: 加载历史记录
}

// 调整库存
const handleAdjust = (row) => {
  dialogType.value = 'add'
  Object.assign(adjustForm, {
    warehouseId: row.warehouseId,
    productId: row.productId,
    type: 'in',
    quantity: 0,
    remark: ''
  })
  dialogVisible.value = true
}

// 提交表单
const handleSubmit = () => {
  // TODO: 实现提交逻辑
  ElMessage.success('保存成功')
  dialogVisible.value = false
}

// 分页大小改变
const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch()
}

// 当前页改变
const handleCurrentChange = (val) => {
  currentPage.value = val
  handleSearch()
}
</script>

<style scoped>
.inventory-list {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 